const path = require('path');
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const webpackConfigBase = require('./webpack.base');

const webpackConfigDev = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    module: {
        rules: [
            // npm i sass-loader node-sass css-loader style-loader postcss-loader autoprefixer -D
            {
                test: /\.(sa|sc|c)ss$/,
                include: path.resolve(__dirname, '../src'),
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')({
                                    browsers: ['last 30 versions', "> 2%", "Firefox >= 10", "ie 6-11"]
                                })
                            ]
                        }
                    }
                ],
            },
        ],
    },
    //插件
    plugins: [
        // 更新组件时在控制台输出组件的路径而不是数字ID，用在开发模式,当模块热替换(HMR)时在浏览器控制台输出对用户更友好的模块名字信息
        new webpack.NamedModulesPlugin(),
        //热更新
        new webpack.HotModuleReplacementPlugin(),
    ],
    //配置webpack开发服务功能
    devServer: {
        //设置基本目录结构
        contentBase: path.resolve(__dirname, '../dist'),
        //服务器ip地址，也可以使用localhost
        host: 'localhost',
        //服务端压缩是否开启
        compress: true,
        //实时刷新
        inline: true,
        //开启热更新
        hot: true,
        //自动打开浏览器
        open: true,
        //配置服务端口号
        port: 8888,
        stats: {
            // 添加 children 信息
            children: false,
            // 添加构建日期和构建时间信息
            builtAt: true,
            // 添加构建模块信息
            modules: false,
        },
        //当有编译错误或者警告的时候显示一个全屏overlay
        overlay: true,
        //devtool控制台显示信息
        clientLogLevel: 'none', //none, info, (warning,error 一直有）
        //代理
        proxy: {
            '/v2': {
                target: 'https://api.douban.com',
                changeOrigin: true,
                secure: false, //https处理
                // pathRewrite: {'^/v2' : '/v2'}
            }
        }
    },
};

module.exports = webpackMerge(webpackConfigBase, webpackConfigDev);